<template>
    <view>
        <view class="uni-padding-wrap">
            <!-- 评论区 start -->
            <view class="uni-comment" >
                <view class="uni-comment-list" v-for="(item,index) in data">
                    <view class="uni-comment-face">
                        <image src="/static/imgs/my/nav4.png" mode="widthFix"></image>
                    </view>
                    <view class="uni-comment-body">
                        <view class="uni-comment-top">
                            <text>{{item.user.username}}</text>
                        </view>
                        <view class="uni-comment-date">
                            <text>{{item.create_time}}</text>
                        </view>
                        <view class="uni-comment-content">{{item.comment}}</view>
                    </view>
                </view>
                
            </view>
			<view style="display: inline-flex; position: fixed; bottom: 0; width: 100%;">
			<input style=" width: 70%; height: 100rpx; background-color: azure; " placeholder="期待你的交流" v-model="pl"></input>
			<button style="width: 20%; height: 80rpx; line-height: 80rpx; margin-top: 10rpx; background-color:aliceblue;" @click="add_comment">发送</button>
			</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: [],
				task_id: '',
				pl: '',
            }
        },
		onLoad(options) {
			console.log(options)
			this.task_id = options.task_id
			this.get_comment()
		
		
		},
		methods: {
			get_comment(){
				var that = this
				this.$api.get_task_commet({task_id:that.task_id}).then(res => {
					console.log(res)
					if(res.code ==  10000){
						that.data = res.data.comment
						
						}
						
					});
			},
			add_comment(){
				var user = uni.getStorageSync('loginInfo')
				if(this.pl.length < 4){
					uni.showToast({
						duration:1000,
						title:'请认真填写!',
						icon: 'none'
					})
					return
				}
				var data = {
					task_id : this.task_id,
					comment : this.pl,
					user: {username: user.username, user_id: user.user_id}
				}
				var that = this
				this.$api.add_task_commet(data).then(res => {
					console.log(res)
					if(res.code ==  10000){
						that.pl = ''
						that.get_comment()
						uni.showToast({
							duration:1000,
							title:'发布成功',
							icon: 'none'
						})
						}
						
					});
				
			}
			
		}
    }
</script>

<style>
    /* comment */
    page {
        background-color: #f8f8f8;
    }

    .uni-padding-wrap {
        padding: 30upx;
    }

    view {
        font-size: 28upx;
    }

    .uni-comment {
        padding: 5rpx 0;
        display: flex;
        flex-grow: 1;
        flex-direction: column;
    }

    .uni-comment-list {
        flex-wrap: nowrap;
        padding: 10rpx 0;
        margin: 10rpx 0;
        width: 100%;
        display: flex;
    }

    .uni-comment-face {
        width: 70upx;
        height: 70upx;
        border-radius: 100%;
        margin-right: 20upx;
        flex-shrink: 0;
        overflow: hidden;
    }

    .uni-comment-face image {
        width: 100%;
        border-radius: 100%;
    }

    .uni-comment-body {
        width: 100%;
    }

    .uni-comment-top {
        line-height: 1.5em;
        justify-content: space-between;
    }

    .uni-comment-top text {
        color: #0A98D5;
        font-size: 24upx;
    }

    .uni-comment-date {
        line-height: 38upx;
        flex-direction: row;
        justify-content: space-between;
        display: flex !important;
        flex-grow: 1;
    }

    .uni-comment-date view {
        color: #666666;
        font-size: 24upx;
        line-height: 38upx;
    }

    .uni-comment-content {
        line-height: 1.6em;
        font-size: 28upx;
        padding: 8rpx 0;
    }

    .uni-comment-replay-btn {
        background: #FFF;
        font-size: 24upx;
        line-height: 28upx;
        padding: 5rpx 20upx;
        border-radius: 30upx;
        color: #333 !important;
        margin: 0 10upx;
    }
</style>
